<template>
  <!-- 通行数据 -->
  <div class="container">
    <el-card class="box-card" :body-style="{ padding: '10px 10px 2px 10px' }" v-if="activeName === 'people'">

      <el-form :inline="true" :model="peopleQueryParam" class="demo-form-inline1">
        <el-form-item label="通道门名称" class="form-item">
          <el-input v-model="peopleQueryParam.deviceName" placeholder="请输入通道门名称" clearable>
          </el-input>
        </el-form-item>

        <el-form-item label="进出日期" class="form-item">
          <el-date-picker v-model="peopleDate" type="daterange" range-separator="至" clearable start-placeholder="开始日期"
            end-placeholder="结束日期" @change="peopleDateChange">
          </el-date-picker>
        </el-form-item>
        <el-form-item class="form-item">
          <el-button type="primary" @click="peopleOnSubmit">查询</el-button>
          <el-button @click="peopleRest">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="box-card" :body-style="{ padding: '10px 10px 2px 10px' }" v-else>
      <el-form :inline="true" :model="labelQueryParam" class="demo-form-inline1">
        <el-form-item label="标签类型" class="form-item item-bottom">
          <el-select v-model="labelQueryParam.labelType" placeholder="请选择标签类型" style="width: 150px">
            <el-option label="盒标签" :value="1"></el-option>
            <el-option label="档案标签" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="通道门名称" class="form-item">
          <el-input v-model="labelQueryParam.deviceName" placeholder="请输入通道门名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="进出日期" class="form-item">
          <el-date-picker v-model="labelDate" type="daterange" range-separator="至" clearable start-placeholder="开始日期"
            end-placeholder="结束日期" @change="labelDateChange">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="出入类型" class="form-item">
          <el-select v-model="labelQueryParam.recordType" placeholder="请选择出入类型" clearable style="width: 150px">
            <el-option label="入库" :value="0"></el-option>
            <el-option label="出库" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否违规" class="form-item">
          <el-select v-model="labelQueryParam.illegalFlag" placeholder="请选择是否违规" style="width: 100px">
            <el-option label="是" :value="1"></el-option>
            <el-option label="否" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="form-item">
          <el-button type="primary" @click="labelOnSubmit">查询</el-button>
        </el-form-item>

        <el-form-item class="form-item">
          <el-button @click="labelRest">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- <el-tabs v-model="activeName" tab-position="left" type="border-card" @tab-click="handleClick">
      <el-tab-pane label="人员通行" name="people">
        <el-card class="box-card" :body-style="{ padding: 10 }">
          <el-table
            :data="peopleTableData"
            row-key="labelId"
            border
            style="width: 100%"
            height="55vh"
          >
            <el-table-column type="index" label="序号" width="50" align="center" sortable>
            </el-table-column>
            <el-table-column
              v-for="item of peopleTableProps"
              :key="item.props"
              :prop="item.prop"
              :label="item.title"
              :width="item.width"
              :sortable="item.sortable"
            >
            </el-table-column>
            <el-table-column label="操作">
              <template #default="{ row }">
                <el-popconfirm title="确定要删除吗？" @confirm="() => handleDelPeople(row)">
                  <el-button slot="reference" link size="mini" class="danger_button"
                    >删除</el-button
                  >
                </el-popconfirm>
              </template>
</el-table-column>
</el-table>
</el-card>
</el-tab-pane>
<el-tab-pane label="标签通行" name="label"> -->
    <el-card class="box-card" :body-style="{ padding: 10 }">
      <el-table :data="labelTableData" row-key="labelId" border style="width: 100%" height="55vh">
        <el-table-column type="index" label="序号" width="50" align="center" sortable>
        </el-table-column>
        <el-table-column prop="deviceName" label="通道门名称" width=""></el-table-column>
        <el-table-column v-if="labelType === 1" prop="boxNo" label="盒号" width=""></el-table-column>
        <el-table-column v-if="labelType === 1" prop="boxName" label="盒名" width=""></el-table-column>
        <el-table-column v-if="labelType === 0" prop="archiveNo" label="档号" width=""></el-table-column>
        <el-table-column v-if="labelType === 0" prop="archiveName" label="题名" width=""></el-table-column>
        <el-table-column prop="rfid" label="RFID" width=""></el-table-column>
        <el-table-column prop="positionName" label="位置" width=""></el-table-column>
        <el-table-column prop="recordType" label="出入库类型" width="">
          <template #default="scope">
            <span v-if="scope.row.recordType === 0">入库</span>
            <span v-if="scope.row.recordType === 1">出库</span>
          </template>
        </el-table-column>
        <el-table-column prop="accessTime" label="出入时间" width=""></el-table-column>
        <el-table-column prop="illegalFlag" label="是否违规" width="">
          <template #default="scope">
            <el-tag v-if="scope.row.illegalFlag === 0" type="success">正常</el-tag>
            <el-tag v-if="scope.row.illegalFlag === 1" type="danger">异常</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-popconfirm title="确定要删除吗？" @confirm="() => handleDelLabel(row)">
              <el-button slot="reference" link size="mini" class="danger_button">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- </el-tab-pane>
    </el-tabs> -->
    <el-card class="box-card" :body-style="{ padding: 10 }" v-if="activeName === 'people'">
      <pagination ref="peoplepagination" :totalCount="peopleTotalCount" @pagination="peoplePagination"></pagination>
    </el-card>
    <el-card class="box-card" :body-style="{ padding: 10 }" v-else>
      <pagination ref="labelpagination" :totalCount="labelTotalCount" @pagination="labelPagination"></pagination>
    </el-card>
  </div>
</template>

  <script>
  import { peoplePageList, labelPageList, peopledel, labeldel } from '@/api/rfid/traffic'
  import moment from 'moment'

  export default {
    name: 'TrafficData',

    data() {
      return {
        activeName: 'label',
        headerHeight: '50vh',
        // ==========================  人员  =================================
        peopleTotalCount: 0, //总数
        //查询条件
        peopleSearchModel: {
          pageNo: 1,
          pageSize: 10,
        },
        peopleQueryParam: {},
        peopleDate: [],
        peopleTableData: [],
        peopleTableProps: [
          { title: '通道门', prop: 'deviceName', width: '', checked: true },
          { title: '进出日期', prop: 'accessDate', width: '', checked: true },
          { title: '进人数', prop: 'inNum', width: '', checked: true },
          { title: '出人数', prop: 'outNum', width: '', checked: true },
        ],
        // ==========================  标签  =================================
        labelType: 1,
        labelTotalCount: 0, //总数
        //查询条件
        labelSearchModel: {
          pageNo: 1,
          pageSize: 10,
        },
        labelQueryParam: {
          labelType: 1,
        },
        labelDate: [],
        labelTableData: [],
      }
    },
    created() {
      // this.activeName = this.$route.params?.name ?? 'people'
    },
    mounted() {
      this.labelLoadData()
    },

    methods: {
      handleClick(tab, event) {
        if (tab.name === 'people') {
          this.headerHeight = '60vh'
          this.peopleTableData = []
          this.peopleLoadData()
        } else if (tab.name === 'label') {
          this.labelTableData = []
          this.headerHeight = '50vh'
          this.labelLoadData()
        }
      },
      // ==========================  人员  =================================
      peopleDateChange(value) {
        if (value === null) {
          this.peopleQueryParam.beginTime = null
          this.peopleQueryParam.endTime = null
        } else {
          this.peopleQueryParam.beginTime = moment(value[0]).format('YYYY-MM-DD 00:00:00')
          this.peopleQueryParam.endTime = moment(value[1]).format('YYYY-MM-DD 23:59:59')
        }
      },
      peopleOnSubmit() {
        this.$refs.peoplepagination.resetPagination()
      },
      peopleRest() {
        this.peopleQueryParam = {}
        this.peopleDate = []
        this.$refs.peoplepagination.resetPagination()
      },
      peopleLoadData() {
        var param = Object.assign(this.peopleQueryParam, this.peopleSearchModel)
        peoplePageList(param)
          .then((res) => {
            if (res.data.code === 200) {
              this.peopleTableData = res.data.data.records
              this.peopleTotalCount = res.data.data.total
            } else {
              this.$message.error(res.data.message)
            }
          })
          .catch((err) => {
            this.$message.error(err)
          })
      },
      peoplePagination(val) {
        this.peopleSearchModel.pageNo = val.page
        this.peopleSearchModel.pageSize = val.limit
        this.peopleLoadData()
      },
      handleDelPeople(row) {
        peopledel(row.recordId)
          .then((res) => {
            if (res.data.code === 200) {
              this.$message.success(res.data.message)
              this.peopleLoadData()
            } else {
              this.$message.error(res.data.message)
            }
          })
          .catch((err) => {
            this.$message.error(err)
          })
      },
      // ==========================  标签  =================================

      handleDelLabel(row) {
        labeldel(row.recordId)
          .then((res) => {
            if (res.data.code === 200) {
              this.$message.success(res.data.message)
              this.labelLoadData()
            } else {
              this.$message.error(res.data.message)
            }
          })
          .catch((err) => {
            this.$message.error(err)
          })
      },
      labelDateChange(value) {
        if (value === null) {
          this.labelQueryParam.beginTime = null
          this.labelQueryParam.endTime = null
        } else {
          this.labelQueryParam.beginTime = moment(value[0]).format('YYYY-MM-DD 00:00:00')
          this.labelQueryParam.endTime = moment(value[1]).format('YYYY-MM-DD 23:59:59')
        }
      },
      labelOnSubmit() {
        this.$refs.labelpagination.resetPagination()
      },
      labelRest() {
        this.labelQueryParam = {
          labelType: this.labelType,
        }
        this.labelDate = []
        this.$refs.labelpagination.resetPagination()
      },
      labelLoadData() {
        this.labelType = this.labelQueryParam.labelType
        var param = Object.assign(this.labelQueryParam, this.labelSearchModel)
        labelPageList(param)
          .then((res) => {
            if (res.data.code === 200) {
              this.labelTableData = res.data.data.records
              this.labelTotalCount = res.data.data.total
            } else {
              this.$message.error(res.data.message)
            }
          })
          .catch((err) => {
            this.$message.error(err)
          })
      },
      labelPagination(val) {
        this.labelSearchModel.pageNo = val.page
        this.labelSearchModel.pageSize = val.limit
        this.labelLoadData()
      },
    },
  }
</script>

  <style lang="less" scoped>
  @import '@/style/tabs.less';

  .demo-form-inline1 {
    .el-form-item {
      margin-bottom: 0 !important;
    }
  }

  .el-tabs__item {
    height: 50%;
  }

  .el-tabs__header {
    height: 55vh !important;
  }

  // .container .el-tabs__header {
  //   height:40vh;
  // }

  // @media screen and (max-width: 1919px) {
  //   .form-item {
  //     margin-bottom: 22px !important;
  //   }
  // }

  // .form-item {
  //   margin-bottom: 0 !important;
  // }

  /* 1920px以下的屏幕使用的样式 */
  // @media (max-width: 1919px) {
  //   .item-bottom {
  //     margin-bottom: 22px !important;
  //   }
  // }

  // /* 1920px及以上的屏幕使用的样式 */
  // @media (min-width: 1920px) {
  //   .item-bottom {
  //     margin-bottom: 0 !important;
  //   }
  // }
</style>